<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>员工后台页面</title>
    <!-- <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> -->

    <script src="../js/jquery-3.3.1.min.js"></script>

    <script src="../js/jquery.md5.js"></script>
    <!-- Bootstrap -->
    <link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

    <script>

        $(function () {
            $.get("/report/employee/getId",function (id) {
                $("#id").html("欢迎你，工号：" + id);
            });

            $.get("/report/employee/getImg", function (img) {
               if(img == null || img === ""){
                   $("#img").attr('src', '/report/img/employee.png');
               }else{
                   $("#img").attr('src', img);
               }
            });

            $("#modify_password").click(function () {
                if($("#oldPassword").val() != null && $("#oldPassword").val() != "" && $("#newPassword").val() != null && $("#newPassword").val() != ""){
                    $.post("/report/employee/modifyPassword", {"oldPassword": $.md5($("#oldPassword").val()), "newPassword": $.md5($("#newPassword").val())}, function (msg) {
                        if(msg === "success"){
                            $("#oldPassword").val("");
                            $("#newPassword").val("");
                            alert("修改成功！");
                        }
                    })
                }
            });

            $("#uploadImg").click(function () {
                var formData = new FormData($("#imgUploadForm")[0]);
                $.ajax({
                    type: 'POST',
                    url: '/report/employee/updateImg',
                    data: formData,
                    cache: false,
                    processData : false,
                    contentType : false,
                    success: function (data) {
                        if(data == null){
                            alert("上传失败");
                        }else{
                            if(data.success === "0"){
                                alert(data.message);
                            }else{
                                $("#img").attr('src', data.url);
                            }
                        }
                    }
                })
            });

            $("#search_attendance_byDate").click(function () {
               getOneDayAttendance();
            });

            $("#search_attendance_byMonth").click(function () {
                getOneMonthAttendance();
            })
        });

        function getOneDayAttendance(){
            if($("#choice_date").val() != null && $("#choice_date").val() != ""){
                $.get("/report/employee/getAttendanceByDate", {"date": $("#choice_date").val()}, function (Result) {
                    if(Result !== ""){
                        html = "<table id=\"date_table\" class=\"table table-hover\" style=\"margin-top: 10px\">\n" +
                            "                        <tr>\n" +
                            "                            <th>#</th>\n" +
                            "                            <th>工号</th>\n" +
                            "                            <th>姓名</th>\n" +
                            "                            <th>出勤时间</th>\n" +
                            "                        </tr>\n";
                        html += "<tr>\n" +
                            "                        <td>"+ 1 +"</td>\n" +
                            "                        <td>" + Result.id +"</td>\n" +
                            "                        <td>" + Result.name +"</td>\n" +
                            "                        <td>" + Result.time + "</td>\n" +
                            "                    </tr>";
                        html += "</table>";
                        $("#date_table_div").html(html);
                        $("#date_info").html("")
                    }else{
                        $("#date_table_div").html("");
                        $("#date_info").html("<h4>当日没有出勤记录</h4>")
                    }
                });
            }
        }

        function getOneMonthAttendance(){
            if($("#choice_month").val() != null && $("#choice_month").val() != ""){
                $.get("/report/employee/getAttendanceByMonth", {"month": $("#choice_month").val()}, function (Result) {
                    html = "<table id=\"month_table\" class=\"table table-hover\" style=\"margin-top: 10px\">\n" +
                        "                        <tr>\n" +
                        "                            <th>#</th>\n" +
                        "                            <th>工号</th>\n" +
                        "                            <th>姓名</th>\n" +
                        "                            <th>出勤率</th>\n" +
                        "                            <th>出勤天数</th>\n" +
                        "                            <th>未出勤天数</th>\n" +
                        "                        </tr>";
                    html += "<tr>\n" +
                        "                        <td>"+ 1 +"</td>\n" +
                        "                        <td>" + Result.id +"</td>\n" +
                        "                        <td>" + Result.name +"</td>\n" +
                        "                        <td>" + Number(Result.attendanceRate).toFixed(2) + "</td>\n" +
                        "                        <td>" + Result.attendanceDay + "</td>\n" +
                        "                        <td>" + Result.absenceDay + "</td>\n" +
                        "                    </tr>";
                    html += "</table>";
                    $("#month_table_div").html(html);
                })
            }
        }


        window.onload = function() {
            var aH2 = document.getElementsByTagName('h2');
            var ul = document.getElementsByTagName('ul');
            var aspan = document.getElementsByTagName('span');
            var drag = [];
            for (var k = 0; k < aH2.length; k++) {
                drag[k] = true;
            }
            for (var i = 0; i < aH2.length; i++) {
                aH2[i].index = i;
                aH2[i].onclick = function() {
                    if (drag[this.index]) {
                        for (var n = 0; n < ul.length; n++) {
                            ul[n].style.height = "0";
                            aH2[n].style.background = "#3889D4";
                            aspan[n].className = "";
                            drag[n] = true
                        }
                        ul[this.index].style.height = "85px";
                        this.style.background = "#393c4a";
                        aspan[this.index].className = "on";
                        drag[this.index] = false;
                    } else {
                        ul[this.index].style.height = "0";
                        this.style.background = "#3889D4";
                        aspan[this.index].className = "";
                        drag[this.index] = true;
                    }
                }
            }
            var dayCheck = document.querySelector('.dayCheck');
            var dayCheckDetails = document.querySelector('.dayCheckDetails');
            var monthCheck = document.querySelector('.monthCheck');
            var monthCheckDetails = document.querySelector('.monthCheckDetails');
            var photo = document.querySelector('.photo');
            var photoUpload = document.querySelector('.photoUpload');
            var pwd = document.querySelector('.pwd');
            var pwdChange = document.querySelector('.pwdChange');


            dayCheck.onclick = function() {
                dayCheckDetails.style.display = 'block';
                monthCheckDetails.style.display = 'none';
                photoUpload.style.display = 'none';
                pwdChange.style.display = 'none';
            }
            monthCheck.onclick = function() {
                dayCheckDetails.style.display = 'none';
                monthCheckDetails.style.display = 'block';
                photoUpload.style.display = 'none';
                pwdChange.style.display = 'none';
            }
            photo.onclick = function() {
                dayCheckDetails.style.display = 'none';
                monthCheckDetails.style.display = 'none';
                photoUpload.style.display = 'block';
                pwdChange.style.display = 'none';
            }
            pwd.onclick = function() {
                dayCheckDetails.style.display = 'none';
                monthCheckDetails.style.display = 'none';
                photoUpload.style.display = 'none';
                pwdChange.style.display = 'block';
            }
        }
    </script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body,
        html {
            height: 100%;
        }

        #box {
            float: left;
            width: 20%;
            height: 100%;
            background-color: #363a45;
            color: #fff;
        }

        #box-1 {
            width: 100%;
            height: 65px;
            background-color: #44495a;
            font-size: 24px;
            color: #fff;
            text-align: center;
            line-height: 65px;
        }

        #nav {
            width: 250px;
            margin: 10px 5px 0;
        }

        #nav h2 {

            background: #3889d4;
            font-size: 16px;
            height: 50px;
            line-height: 20px;
            transition: .5s;
            margin-bottom: 5px;
            cursor: pointer;
        }

        #nav h2 span {
            width: 0;
            height: 0;
            display: block;
            border: 8px solid transparent;
            border-left-color: #fff;
            position: relative;
            left: 224px;
            top: 16px;
            transform-origin: 1px 8px;
            transition: .5s;
        }

        #nav ul {
            transition: .5s;
            overflow: hidden;
            cursor: pointer;
        }

        li {
            font-size: 15px;
            line-height: 40px;
            font-weight: bold;
        }

        .on {
            transform: rotate(90deg);
        }

        .content {
            float: left;
            width: 80%;
            height: 100%;
            background-color: #fff;
        }

        .top {
            width: 100%;
            height: 65px;
            box-shadow: 0 1px 2px 0 rgba(40, 42, 49, .16);
        }

        .top a {
            margin: 0 20px;
            float: right;
            font-size: 20px;
            font-weight: bold;
            color: #44495a;
            text-align: center;
            line-height: 65px;
        }

        .dayCheckDetails,
        .monthCheckDetails {
            display: none;
            /*background-color: pink;*/
        }

        .photoUpload {
            display: none;
            /*background-color: skyblue;*/
        }

        .pwdChange {
            display: none;
            /*background-color: red;*/
        }
    </style>
</head>



<body>
<!-- 侧边栏开始 -->
<div id="box">
    <div id="box-1">人脸识别考勤报表系统
        <div id="nav">
            <h2><span class=""></span>查看考勤信息</h2>
            <ul style="height: 0;">
                <li class="dayCheck">按日查看考勤信息</li>
                <li class="monthCheck">按月查看考勤信息</li>
            </ul>
            <h2><span class=""></span>修改个人信息</h2>
            <ul style="height: 0;">
                <li class="photo">上传证件照</li>
                <li class="pwd">修改密码</li>
            </ul>
        </div>
    </div>
</div>
<!-- 侧边栏结束 -->

<!-- 请在下面对 对应模块内容修改 -->
<div class="content">
    <div class="top">
        <a id="logout" href="/report/login/logout" style="color: #f9321e">退出</a>
        <a id="id" href="javascript:void(0)">登录</a>
    </div>
    <!-- 请在下面对 对应模块内容修改 -->
    <div class="main">
        <div class="dayCheckDetails">
            <div style="width: 70%; height: auto; margin-left: 30px; margin-top: 30px">
                <h4>按日期查看出勤信息</h4>
                <form class="form-inline">
                    <div class="form-group">
                        <label for="choice_date">日期</label>
                        <input id="choice_date" type="date"/>
                    </div>
                    <button id="search_attendance_byDate" class="btn btn-primary" type="button" style="margin-left: 10px">查询出勤表</button>
                </form>
                <div id="date_table_div">
                    <!--ajax返回的json会在这里形成表格-->
                    <table id="date_table" class="table table-hover" style="margin-top: 10px">
                        <tr>
                            <th>#</th>
                            <th>工号</th>
                            <th>姓名</th>
                            <th>出勤时间</th>
                        </tr>
                    </table>
                </div>
                <div id="date_info"></div>
            </div>
        </div>
        <div class="monthCheckDetails">
            <div style="width: 80%; height: auto; margin-left: 30px; margin-top: 30px">
                <h4>按月份查看出勤信息</h4>
                <form class="form-inline">
                    <div class="form-group">
                        <label for="choice_month">月份</label>
                        <input id="choice_month" type="month"/>
                    </div>
                    <button id="search_attendance_byMonth" class="btn btn-primary" type="button" style="margin-left: 10px">查询出勤信息</button>
                </form>
                <div id="month_table_div">
                    <table id="month_table" class="table table-hover" style="margin-top: 10px">
                        <tr>
                            <th>#</th>
                            <th>工号</th>
                            <th>姓名</th>
                            <th>出勤率</th>
                            <th>出勤天数</th>
                            <th>未出勤天数</th>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="photoUpload">
            <div style="width: 80%; height: auto; margin-left: 30px; margin-top: 30px">
                <h4>上传证件照</h4>
                <img id="img" class="img-thumbnail col-md-offset-3" src="" style="max-width: 400px; max-height: 450px">
                <form id="imgUploadForm" class="form-horizontal" style="margin-top: 20px">
                    <div class="form-group">
                        <label for="inputFile" class="col-md-3">选择图像</label>
                        <input type="file" id="inputFile" accept="image/*" name="image-file">
                        <p class="help-block col-md-offset-3">请上传近期照片，仅支持.jpg格式，请保证图片中仅一人头像。</p>
                    </div>
                    <button class="col-md-offset-3 btn btn-lg btn-primary" id="uploadImg" type="button">上传</button>
                </form>
            </div>
        </div>
        <div class="pwdChange">
            <div style="width: 80%; height: auto; margin-left: 30px; margin-top: 30px">
                <h4>修改密码</h4>
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="oldPassword" class="col-sm-2 control-label">旧密码</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="oldPassword">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="newPassword" class="col-sm-2 control-label">新密码</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="newPassword">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button id="modify_password" type="button" class="btn btn-primary">修改密码</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

</body>

</html>